<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{height: 2000px;}
		#first{
			width: 500px;height: 500px;background-color: red;overflow: hidden;		}
		#blueDiv{width: 200px;height: 200px;background-color: blue;margin: 100px;}
	</style>
</head>
<body>
	<div id="first">
		<div id="blueDiv"></div>
	</div>
</body>
<script type="text/javascript">
var first = document.getElementById("first");
first.onclick = function(ev){
	// 事件对象，每次触发事件之后，都会生成一个事件对象，事件对象包含了事件里的详细信息，有系统传参给我们使用
	// 第一种获取事件对象
	// console.log(window.event);
	// 第二种，通过参数获取
	// console.log(ev);
	// 兼容性写法
	var e=window.event||ev;
	// console.log(e);
}
// 事件对象里的常用属性
first.onmousemove = function(ev){
	var e = window.event || ev;
	console.log(e.target);// 触发事件的对象
	console.log(e.clientX,e.clientY);// 相对于窗口左上角的位置
	console.log(e.pageX,e.pageY);// 相对于页面的位置，包含滚动过去的位置。（不是body）
	console.log(e.offsetX,e.offsetY);// 相对于触发事件的对象的坐标
	console.log(e.screenX,e.screenY);// 相对于屏幕的坐标
}
var jKey = false, kKey = false;
document.onkeydown = function(ev){
	// console.log(ev);
	// keyCode 是用来判断用户按了哪一个键
	console.log(ev.keyCode);
	// 如何判断用户按了 alt + f
	if (ev.keyCode == 74) {
		jKey = true;
		setTimeout(function(){
			jKey = false;
		},10);
	}
	if (ev.keyCode == 75) {
		kKey =true;
		setTimeout(function(){
			kKey = false;
		},10);
	}
	if (kKey && jKey) {
		console.log("放大招了");
	}
}
document.onkeyup = function(ev){
	if (ev.keyCode ==74) {
		jKey = false;
	}
	if (ev.keyCode == 75) {
		kKey = false;
	}
}
// keydown 不区分大小写，可以识别特殊按键；
// keypress 区分大小写，不识别特殊按键
</script>
</html>